 /*
 * @description: 客服系统/聊天部分
 * @Author: along
 * @Date: 2020-09-29
 * @Last Modified by: along
 * @Last Modified time: 2021-04-25
 */
<template>
    <div class="chat customChast">
        <div
            class="chat-wrap"
            v-if="session_no"
        >
            <div
                class="message"
            >
                <!-- head -->
                <div class="head" v-if="JSON.stringify(sessionInfo) !== '{}'">
                    <div class="head-name">
                        {{ sessionInfo.user_info.true_name }}
                        <p class="head-shop" v-if="sessionInfo.chat_type == 'shop'">(来自店铺: {{ sessionInfo.shop_info.shop_title }})</p>
                        <p class="head-shop" v-if="sessionInfo.chat_type == 'official'">官方客服</p>
                    </div>
                    <div class="head-transfer" v-if="sessionInfo.session_status == 1 && tab == 0">
                        <p class="head-transfer-accep" v-if="show" @click="fnTransferSession()">转接</p>
                        <p class="head-transfer-quit" v-if="show" @click="fnQuitSession()">退出接待</p>
                    </div>
                </div>

                <!-- content -->
                <div
                    class="content"
                    :class="isScroll ? 'show-scroll' : 'hide-scroll'"
                    v-loadmore="loadMore"
                    :style="{height: !formData.detailFlag ? '70%' : '85%'}"
                    @mouseenter="showScroll()"
                    @mouseleave="scrollHide()"
                    v-loading="showLoading"
                >
                    <div class="content-loading" v-if="formData.loading">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div
                        v-for="(option,index) in dataList"
                        :key="index"
                        class="session"
                    >
                        <!-- 用户消息 -->
                        <div class="self" v-if="option.is_sender == 0 && !option.is_retract">
                            <!-- 通知消息 -->
                            <div class="session-head" v-if="option.msg_type !== 'notice'">
                                <img :src="option.sender_info.sender_head" class="session-img">
                                <p class="session-name">{{ option.sender_info.sender_name }}</p>
                                <p class="session-time">{{ option.msg_time | timeFilter }}</p>
                            </div>

                            <!-- 消息 -->
                            <div class="session-msg-wrap">
                                <template>
                                    <!-- 文本消息 -->
                                    <div class="session-msg" v-if="option.msg_type == 'text'" v-html="option.msg_content" style="white-space: pre-wrap;"/>
                                    <!-- 图片消息 -->
                                    <img
                                        v-width
                                        v-if="option.msg_type == 'image'"
                                        :src="JSON.parse(option.msg_content).url"
                                        :style="{width: JSON.parse(option.msg_content).w + 'px', maxWidth: '240px', margin: '10px 0px 0 0', borderRadius: '10px'}"
                                        @click="fnShowPreview(JSON.parse(option.msg_content).url)"
                                    />
                                    <!-- :preview-src-list="[JSON.parse(option.msg_content).url]" -->
                                    <!-- 视频消息 -->
                                    <div
                                        v-if="option.msg_type == 'video'"
                                        :style="{width: 'auto', margin: '10px 24px 0 0', borderRadius: '10px', cursor: 'pointer'}"
                                        class="__video"
                                        :id="JSON.parse(option.msg_content).cover"
                                        @click="handlePlayVideo(option, 'left')"
                                    >
                                        <el-image
                                            :src="JSON.parse(option.msg_content).cover"
                                            :style="{width: 'auto', maxWidth: '240px', borderRadius: '10px'}"
                                        />
                                        <img
                                            src="@/assets/image/custom_video_icon.png"
                                            class="__video_icon"
                                        >
                                    </div>
                                    <!-- emoji表情 -->
                                    <el-image
                                        v-width
                                        v-if="option.msg_type == 'emoji'"
                                        :src="JSON.parse(option.msg_content).url"
                                        :preview-src-list="[JSON.parse(option.msg_content).url]"
                                        :style="{width: JSON.parse(option.msg_content).w + 'px', maxWidth: '240px', margin: '10px 0px 0 0', borderRadius: '10px'}"
                                    />
                                    <!-- 商品/拼团-淘客-0元购-折扣-砍价-新人 -->
                                    <div class="session-goods" v-if="option.msg_type == 'goods_self' || option.msg_type == 'goods_free' || option.msg_type == 'goods_discount' || option.msg_type == 'goods_bargain'">
                                        <p class="goods_order">
                                            商品编号：{{ JSON.parse(option.msg_content).goods_no }}
                                            <span @click="fnCheckOrder(JSON.parse(option.msg_content).goods_no)" class="order_copy">复制编号</span>
                                        </p>
                                        <div class="goods_content">
                                            <img :src="JSON.parse(option.msg_content).goods_cover" class="goods_cover">
                                            <div class="goods_wrap">
                                                <p class="goods_title">{{ JSON.parse(option.msg_content).goods_title }}</p>
                                                <p class="goods_price">¥{{ JSON.parse(option.msg_content).goods_price }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 商品/抽奖 -->
                                    <div class="session-goods" v-if="option.msg_type == 'goods_lottery'">
                                        <p class="goods_order">
                                            商品编号：{{ JSON.parse(option.msg_content).lottery_no }}
                                            <span @click="fnCheckOrder(JSON.parse(option.msg_content).lottery_no)" class="order_copy">复制编号</span>
                                        </p>
                                        <div class="goods_content">
                                            <img :src="JSON.parse(option.msg_content).goods_cover" class="goods_cover">
                                            <div class="goods_wrap">
                                                <p class="goods_title">{{ JSON.parse(option.msg_content).goods_title }}</p>
                                                <p class="goods_price">¥{{ JSON.parse(option.msg_content).goods_price }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 商品/秒杀 -->
                                    <div class="session-goods" v-if="option.msg_type == 'goods_flash_sale'">
                                        <p class="goods_order">
                                            商品编号：{{ JSON.parse(option.msg_content).sale_no }}
                                            <span @click="fnCheckOrder(JSON.parse(option.msg_content).sale_no)" class="order_copy">复制编号</span>
                                        </p>
                                        <div class="goods_content">
                                            <img :src="JSON.parse(option.msg_content).goods_cover" class="goods_cover">
                                            <div class="goods_wrap">
                                                <p class="goods_title">{{ JSON.parse(option.msg_content).goods_title }}</p>
                                                <p class="goods_price">¥{{ JSON.parse(option.msg_content).goods_price }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 商品/新人 -->
                                    <div class="session-goods" v-if="option.msg_type == 'goods_welfare'">
                                        <p class="goods_order">
                                            商品编号：{{ JSON.parse(option.msg_content).welfare_no }}
                                            <span @click="fnCheckOrder(JSON.parse(option.msg_content).welfare_no)" class="order_copy">复制编号</span>
                                        </p>
                                        <div class="goods_content">
                                            <img :src="JSON.parse(option.msg_content).goods_cover" class="goods_cover">
                                            <div class="goods_wrap">
                                                <p class="goods_title">{{ JSON.parse(option.msg_content).goods_title }}</p>
                                                <p class="goods_price">¥{{ JSON.parse(option.msg_content).goods_price }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 订单 -->
                                    <div class="session-order" v-if="option.msg_type == 'order'">
                                        <p class="goods_order">
                                            订单编号：{{ JSON.parse(option.msg_content).order_no }}
                                            <span @click="fnCheckOrder(JSON.parse(option.msg_content).order_no)" class="order_copy">复制编号</span>
                                        </p>
                                        <div class="goods_clumn">
                                            <img :src="JSON.parse(option.msg_content).goods_cover" class="goods_cover">
                                            <div class="goods_wrap">
                                                <p class="goods_title">{{ JSON.parse(option.msg_content).goods_title }}</p>
                                                <p class="goods_status">订单状态：{{ JSON.parse(option.msg_content).order_status_text }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </template>

                                <template v-if="option.msg_type == 'image' || option.msg_type == 'video' ||option.msg_type == 'emoji' || option.msg_type == 'text'">
                                    <div class="session_button">
                                        <el-popover
                                            placement="right"
                                            width="68"
                                            trigger="hover"
                                            popper-class="zsdx_message"
                                            :close-delay="10"
                                        >
                                            <div
                                                class="zsdx_message_copy"
                                                @click="handleCopyMessage(option)"
                                            >
                                                复制
                                            </div>
                                            <el-button
                                                type="text"
                                                slot="reference"
                                            >
                                                <i class="zsdxfont zsdxdian"></i>
                                            </el-button>
                                        </el-popover>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- 客服消息 -->
                        <div class="my" v-if="option.is_sender == 1 && !option.is_retract">
                            <div class="session-head right">
                                <p class="session-time">{{ option.msg_time | timeFilter }}</p>
                                <p class="session-name">{{ option.sender_info.sender_name }}</p>
                                <img :src="option.sender_info.sender_head" class="session-img">
                            </div>
                            <div class="session-wrap">
                                <div
                                    class="session-mid"
                                    :style="{paddingTop: option.msg_type == 'image' || option.msg_type == 'video' ? '12px' : ''}"
                                >
                                    <p :style="{color: !option.msg_read ? '#20A0FF' : 'rgba(0,0,0,.5)'}">
                                        {{ option.msg_read == 1 ? '已读' : '未读' }}
                                    </p>
                                    <template v-if="option.msg_type == 'image' || option.msg_type == 'video' || option.msg_type == 'text'">
                                        <div class="session_button">
                                            <el-popover
                                                placement="left"
                                                width="68"
                                                trigger="hover"
                                                popper-class="zsdx_message"
                                                :close-delay="10"
                                            >
                                                <div
                                                    class="zsdx_message_copy"
                                                    @click="handleCopyMessage(option)"
                                                >
                                                    复制
                                                </div>
                                                <div
                                                    v-if="new Date().getTime() - (option.msg_time * 1000) > 120000 ? false : true"
                                                    class="zsdx_message_copy"
                                                    :style="{marginTop: '16px'}"
                                                    @click="handleCancekmessage(option)"
                                                >
                                                    撤回
                                                </div>
                                                <el-button
                                                    type="text"
                                                    slot="reference"
                                                >
                                                    <i class="zsdxfont zsdxdian"></i>
                                                </el-button>
                                            </el-popover>
                                        </div>
                                    </template>
                                </div>
                                <div class="__height">
                                    <!-- 文本消息 -->
                                    <div class="session-msg" :style="{background: 'rgba(32,160,255,.2)', whiteSpace: 'pre-wrap', marginTop: '0px'}" v-if="option.msg_type == 'text'" v-html="option.msg_content"></div>
                                    <!-- 图片消息 -->
                                    <img
                                        v-width
                                        :src="JSON.parse(option.msg_content).url"
                                        v-if="option.msg_type == 'image'"
                                        :style="{width: JSON.parse(option.msg_content).w + 'px', maxWidth: '240px', margin: '10px 24px 0 0', borderRadius: '10px'}"
                                        @click="fnShowPreview(JSON.parse(option.msg_content).url)"
                                    />
                                    <!-- :preview-src-list="[JSON.parse(option.msg_content).url]" -->

                                    <!-- 视频消息 -->
                                    <div
                                        v-if="option.msg_type == 'video'"
                                        :style="{width: 'auto', margin: '10px 24px 0 0', borderRadius: '10px', cursor: 'pointer'}"
                                        class="__video"
                                        :id="JSON.parse(option.msg_content).cover"
                                        @click="handlePlayVideo(option, 'right')"
                                    >
                                        <!-- 正在上传中进度显示 -->
                                        <template v-if="option.process >=0 && option.process < 100">
                                            <div class="__process_wrap">
                                                <el-progress
                                                    :width="60"
                                                    type="circle"
                                                    :percentage="Number(option.process)"
                                                />
                                            </div>
                                        </template>

                                        <!-- 上传失败 -->
                                        <!-- <template v-else-if="option.process === -1">
                                            <p>
                                                上传失败
                                            </p>
                                        </template> -->

                                        <!-- 已上传完成展示 -->
                                        <template v-else>
                                            <el-image
                                                :src="JSON.parse(option.msg_content).cover"
                                                :style="{width: 'auto', maxWidth: '240px', borderRadius: '10px'}"
                                            />
                                            <img
                                                src="@/assets/image/custom_video_icon.png"
                                                class="__video_icon"
                                            >
                                        </template>
                                    </div>
                                    <!-- emoji消息 -->
                                    <el-image
                                        v-width
                                        v-if="option.msg_type == 'emoji'"
                                        :src="JSON.parse(option.msg_content).url"
                                        :preview-src-list="[JSON.parse(option.msg_content).url]"
                                        :style="{width: JSON.parse(option.msg_content).w + 'px', maxWidth: '240px', margin: '10px 24px 0 0', borderRadius: '10px'}"
                                    />
                                </div>
                            </div>
                        </div>

                        <!-- 通知 -->
                        <div class="notice_wrap">
                            <span
                                class="notice"
                                v-if="option.msg_type == 'notice' || option.is_retract === 1"
                                :style="{
                                    padding: option.is_retract === 1 ? '4px 10px' : '',
                                    backgroundColor: option.is_retract === 1 ? 'rgba(240, 242, 247, 1)' : '',
                                    height: option.is_retract === 1 ? 'auto' : '18px'
                                }"
                            >
                                <!-- notice通知 -->
                                <template v-if="option.msg_type == 'notice'">
                                    {{ option.msg_time | timeFilter }} {{ JSON.parse(option.msg_content).text }}
                                </template>
                                <!-- 撤回通知 -->
                                <template v-if="option.is_retract === 1">
                                    <!-- 客服撤回 -->
                                    <template v-if="option.is_sender === 1">
                                        {{ option.msg_time | timeFilter }} {{ '你撤回了一条消息' }}
                                    </template>
                                    <!-- 用户撤回 -->
                                    <template v-if="option.is_sender === 0">
                                        <!-- {{ option.msg_time | timeFilter }} {{ sessionInfo.user_info.true_name + '撤回了一条消息' }} -->
                                        {{ option.msg_time | timeFilter }} {{ '对方撤回了一条消息' }}
                                    </template>
                                </template>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- chat -->
                <div v-if="!formData.detailFlag" :style="{height: 'calc(30% - 64px)', display: 'flex', alignItems: !formData.sessionFlag ? 'center' : ''}">
                    <div class="chat" :style="{marginTop: '20px'}" v-if="formData.sessionFlag">
                        <custom-emoji
                            :show="formData.showEmoji"
                            @change="getEmoji"
                        />
                        <input
                            style="display:none"
                            type="file"
                            multiple="multiple"
                            ref="fileInput"
                            accept='image/*'
                            @change="handleChangeFile"
                        />
                        <div class="chat-head">
                            <!-- 选择表情 -->
                            <i class="zsdxfont zsdxbiaoqing" @click.stop="formData.showEmoji = !formData.showEmoji"></i>
                            <!-- 选择图片 -->
                            <i class="zsdxfont zsdxtupian" @click.stop="uploadImage()"></i>
                            <!-- 选择视频 -->
                            <div class="__upload">
                                <el-upload
                                    class="__upload_wrpa"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    accept="video/*"
                                    :multiple="true"
                                    :file-list="fileList"
                                    :limit="1"
                                    :show-file-list="false"
                                    :http-request="fnUploadFile"
                                    :on-exceed="beforeUploadExcwwd"
                                >
                                    <i class="zsdxfont zsdxshipin"></i>
                                </el-upload>
                            </div>
                            <!-- 索要评价 -->
                            <i class="zsdxfont zsdxpingjia" @click.stop="sendEvaluate()"></i>
                        </div>
                        <el-input
                            type="textarea"
                            ref="textarea"
                            :autosize="{ minRows: 6, maxRows: 6}"
                            placeholder="输入内容后回车键(Enter键)发送"
                            v-model="formData.message"
                            @keydown.native="sendSessionMsg"
                            @paste.native="handlePaste"
                            class="chat-message"
                        />
                    </div>
                    <div class="chat-no" v-else>
                        如需联系客户,请点击
                        <p class="chat-start" @click="startSession()">{{ sessionInfo.session_status == 0 || sessionInfo.session_status == 1 ? '开始会话' : '重新发起会话' }}</p>
                    </div>
                </div>
                <div :style="{height: 'calc(15% - 64px)', display: 'flex', alignItems: 'center'}" v-else>
                    <el-button
                        size="small"
                        type="default"
                        :style="{width: '120px', margin: '0 15px 0 24px'}"
                        @click="closeModel()"
                    >
                        关闭
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        :style="{width: '120px'}"
                        v-if="authList.includes('session')"
                        @click="nextSession()"
                    >
                        重新发起会话
                    </el-button>
                </div>
            </div>

            <!-- detail -->
            <div class="detail">
                <!-- <p class="detail-title">客户资料详情</p> -->
                <div class="_detail_header">
                    <p
                        class="_detail_title"
                        @click="handleChangeTab(0)"
                        :style="{color: CUURENT == 0 ? 'rgba(0, 0, 0, 0.8)' : '', fontWeight: CUURENT == 0 ? 500 : 400}"
                    >资料</p>
                    <p
                        class="_detail_title"
                        @click="handleChangeTab(1)"
                        :style="{color: CUURENT == 1 ? 'rgba(0, 0, 0, 0.8)' : '', fontWeight: CUURENT == 1 ? 500 : 400}"
                    >订单</p>
                    <p class="_detail_tabs" :style="{left: CUURENT == 0 ? '56px' : '196px'}"></p>
                </div>

                <!-- 资料展示 -->
                <template v-if="CUURENT === 0">
                    <div v-if="JSON.stringify(sessionInfo) !== '{}'">
                        <div class="detail-info">
                            <img :src="sessionInfo.user_info.head_img" class="detail-photo">
                            <div class="detail-wrap">
                                <p class="name">{{ sessionInfo.user_info.true_name }}</p>
                                <p class="agent">{{ sessionInfo.user_info.agent_level >= 0 ? '校园精英' : '普通用户' }}</p>
                            </div>
                        </div>
                        <div class="item">
                            <p class="item-title">性  别:</p>
                            <p class="item-content">{{ sessionInfo.user_info.sex == 1 ? '男' : (sessionInfo.user_info.sex == 2 ? '女' : '') }}</p>
                        </div>
                        <div class="item">
                            <p class="item-title">收件人:</p>
                            <p class="item-content">{{ sessionInfo.user_info.address_name ? sessionInfo.user_info.address_name : '--' }}</p>
                        </div>
                        <div class="item">
                            <p class="item-title">收货手机号:</p>
                            <p class="item-content">{{ sessionInfo.user_info.address_phone ? sessionInfo.user_info.address_phone : '--' }}</p>
                        </div>
                        <div class="item">
                            <p class="item-title">收货地址:</p>
                            <p class="item-content">{{ sessionInfo.user_info.address_detail ? sessionInfo.user_info.address_detail : '--' }}</p>
                        </div>
                        <p class="item-line"></p>
                        <div class="item">
                            <p class="item-title" v-if="sessionInfo.chat_type == 'shop'">来自店铺:</p>
                            <p class="item-content" v-if="sessionInfo.chat_type == 'shop'">{{ sessionInfo.shop_info.shop_title }}</p>
                            <p class="item-content" v-if="sessionInfo.chat_type == 'official'">官方客服</p>
                        </div>
                        <div class="item">
                            <p class="item-title">最近购买:</p>
                            <p class="item-content">{{ sessionInfo.user_info.order_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                        </div>
                        <div class="item">
                            <p class="item-title">购买次数：</p>
                            <p class="item-content">{{ sessionInfo.user_info.order_count }}次</p>
                        </div>
                        <div class="item">
                            <p class="item-title">客 单 价：</p>
                            <p class="item-content" v-if="sessionInfo.user_info.acg_order_money">¥{{ Number(sessionInfo.user_info.acg_order_money).toFixed(2) }}</p>
                            <p class="item-content" v-else>--</p>
                        </div>
                        <p class="item-line" :style="{marginLeft: 0, width: '100%'}"></p>
                        <p class="item-remark">会话备注</p>
                        <el-input
                            type="textarea"
                            placeholder="请输入会话备注"
                            v-model="sessionInfo.session_remark"
                            maxlength="100"
                            class="item-textarea"
                        />
                        <p class="item-save" @click="saveRemark()">保存备注</p>
                    </div>
                </template>

                <!-- 订单数据 -->
                <template v-if="CUURENT === 1">
                    <div class="_order">
                        <div class="_order_view" v-if="isOrderTips">
                            <p class="_order_view_text">仅展示近1个月的订单</p>
                            <i class="zsdxfont zsdxshanchuchacha" @click="handleHideTips()"></i>
                        </div>

                        <el-input
                            v-model="order_no"
                            placeholder="请输入内容"
                            size="small"
                            clearable
                            suffix-icon="el-icon-search"
                            :style="{
                                width: '256px',
                                marginLeft: '12px',
                                marginTop: '12px'
                            }"
                            @change="checkShopOrderData()"
                            @keyup.native.enter="checkShopOrderData()"
                            @clear="orderList = orderListCopy"
                        />

                        <!-- 无订单数据 -->
                        <template v-if="!orderList.length">
                            <div class="_order_none">
                                <img src="@/assets/image/custom_none_order.png" class="_order_none_image">
                                <p class="_order_none_text">暂无订单记录</p>
                            </div>
                        </template>

                        <!-- 有订单数据 -->
                        <template v-if="orderList.length">
                            <div
                                v-for="(row,index) in orderList"
                                :key="index"
                                class="_order_item"
                            >
                                <div class="_order_side">
                                    <div class="order_cover_wrap">
                                        <img :src="row.goods_cover" class="order_cover">
                                        <p class="order_goods_num" v-if="row.goods_num">共{{ row.goods_num }}件</p>
                                    </div>
                                    <p class="_order_title">{{ row.goods_title }}</p>
                                </div>
                                <div class="_order_list">
                                    <p class="_order_name">订单编号</p>
                                    <p class="_order_content">{{ row.order_no }}</p>
                                    <img src="@/assets/image/custom_copy.png" class="_order_copy" @click="handleCopyOrder(row.order_no)">
                                </div>
                                <div class="_order_list">
                                    <p class="_order_name">下单时间</p>
                                    <p class="_order_content">{{ row.order_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                                </div>
                                <div class="_order_list">
                                    <p class="_order_name">付款时间</p>
                                    <p class="_order_content">{{ row.pay_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                                </div>
                                <div class="_order_list">
                                    <p class="_order_name">付款方式</p>
                                    <p class="_order_content">{{ row.order_type == 1 ? '微信' : row.order_type == 2 ? '支付宝' : '无需支付'}}</p>
                                </div>
                                <div class="_order_list">
                                    <p class="_order_name">支付金额</p>
                                    <p class="_order_content">¥{{ row.money ? row.money : '0.00' }}</p>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </div>

        <!-- 默认展示 -->
        <div class="chat-view" v-else>
            <img src="@/assets/image/chat-view.png" class="chat-view-image">
            <p class="chat-view-text">选中左侧会话开始接待</p>
        </div>

        <!-- 转接客服 -->
        <el-dialog
            title="转接客服"
            :visible.sync="dialogVisible"
            width="640px"
            class="transfer"
        >
            <div>
                <p class="tips">只展示空闲和忙碌的客服，已过滤离线、超出接待数量的客服</p>
                <div class="header">
                    <div class="header-box">
                        <p class="header-box-title">客服名称</p>
                        <el-input
                            v-model="nickname"
                            placeholder="请输入内容"
                            size="small"
                            clearable
                            suffix-icon="el-icon-search"
                            :style="{width: '160px'}"
                            @change="getTableData()"
                            @keyup.native.enter="getTableData()"
                        />
                    </div>
                    <div class="header-box">
                        <p class="header-box-title">客服类型</p>
                        <el-select
                            v-model="type"
                            clearable
                            filterable
                            placeholder="请选择"
                            size="small"
                            :style="{width: '160px'}"
                            @change="getTableData()"
                        >
                            <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                </div>
                <el-table
                    :data="transList"
                    style="width: 100%;max-height: 400px"
                    height="100%"
                    :show-header="false"
                    border
                >
                    <el-table-column
                        type="index"
                        width="80"
                        label="序号"
                        align="center"
                    />
                    <el-table-column
                        prop=""
                        label="信息"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="left"
                    >
                        <template slot-scope="scope">
                            <div class="info">
                                <div class="info-main">
                                    <img :src="scope.row.head_img" class="head_img">
                                    <p class="status" :style="{background: true ? '#4CD964' : '#FF3030'}"></p>
                                </div>
                                <div class="info-wrap">
                                    <p class="info-name">{{ scope.row.nickname }}</p>
                                    <p class="info-kf">当前接待人数: {{ scope.row.service_num }}人</p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <i
                                v-if="!scope.row.flag"
                                class="zsdxfont zsdxweixuanzhong"
                                @click="changeKf(scope.row, true)"
                            />
                            <i
                                v-if="scope.row.flag"
                                class="zsdxfont zsdxgouxuan1"
                                @click="changeKf(scope.row, false)"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    @click="dialogVisible = false"
                    size="small"
                    :style="{width: '120px', height: '36px', marginRight: '32px'}"
                >取消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="confirmTransfer()"
                    :style="{width: '120px', height: '36px'}"
                >确定</el-button>
            </span>
        </el-dialog>

        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="url"
            :top="54"
            :left="left"
        />

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { friendlyDate } from '@/assets/js/utils.js';
import customEmoji from '@/components/custom/custom-emoji.vue';
import { replaceEmoji } from '@/assets/js/emoji.js';
import videoSimple from '@/components/custom/video-simple.vue';
import imgPreview from '@/components/common/img-preview';

const CHAT = {
    loading: false,//加载loading
    nextPage: false,//是否加载下一页数据
    sessionFlag: true,//会话状态 true:进行中 false:未开始或已结束
    showEmoji: false,//是否显示emoji
    message: '',//输入框消息内容
    onShfit: false,
    onCtrl: false,
    detailFlag: false,//查看详情,底部显示调整
};

export default {
    name: 'CustomChat',
    components: {
        customEmoji,
        videoSimple,
        imgPreview
    },
    props: {
        session_no: {
            type: String,
            default: () => {}
        }
    },
    computed: {
        ...mapState({
            sessionlist: state => state.global.sessionList,//当前会话列表
            dataList: state => state.global.dataList,//当前会话记录
            userInfo: state => state.global.userInfo,
            msgReadUpdate: state => state.global.msgReadUpdate,
            msgList: state => state.global.msgList,
            tabObject: state => state.global.tabObject,
            authList: state => state.global.authList,
            show: state => state.global.show,
            tab: state => state.global.tab,
            session_stat: state => state.global.session_stat,
            msg_retract_id: state => state.global.msg_retract_id,
            chat_no: state => state.global.chat_no,
            is_check_msg: state => state.global.is_check_msg
        })
    },
    filters: {
        timeFilter (val){
            if(Math.abs(new Date().getTime() - val * 1000) < 60 * 1000) return '刚刚';
            return friendlyDate(val*1000, 'hour');
        }
    },
    directives: {
        loadmore: {
            inserted(el, binding) {
                const f = function (evt) {
                    if (binding.value(evt, el)) {
                        el.removeEventListener('scroll', f);
                    }
                };
                const throttle = (fn, interval = 60) => {
                    let run = true;
                    return function () {
                        if (!run) return;
                        run = false;
                        setTimeout(() => {
                            fn.apply(this, arguments);
                            run = true;
                        }, interval);
                    };
                };

                el.addEventListener('scroll', throttle(f));
            }
        },
        //规则: 图片最大宽度限制240px
        width: {
            inserted(el, binding) {
                if(binding) {
                    const image = el.getBoundingClientRect();

                    setTimeout(()=>{
                        if(image.width > 240) {
                            el.style.width = '240px';
                            el.style.height = parseInt(image.height / (image.width / 240)) + 'px';
                        } else {
                            return false;
                        }
                    },0);
                }
            }
        }
    },
    watch: {
        // 入口
        session_no (val) {
            if(val) {
                // console.log('session', val);
                this.changeTable = true;
                if(this.clickIndex > 0) {
                    this.showLoading = true;
                }
                this.clickIndex++;
                this.$store.commit('global/CLEAR_DATALIST');
                setTimeout(()=>{
                    this.getSessionMsgList(0);
                    this.getSessionInfo();
                },0);
            }
        },
        dialogVisible (val) {
            if(!val) {
                this.nickname = '';
                this.type = '';
            }
        },
        dataList: {
            handler: function (val, oldVal) {
                setTimeout(()=>{
                    if(val.length !== oldVal.length) {
                        this.setMessageHeight();
                        // console.log('------当前会话列表数据------', val);
                    }
                },110);
            },
            deep: true
        },
        msgReadUpdate (val) {
            this.upDateSession(val.split('&')[0]);
        },
        // 消息撤回
        msg_retract_id (val) {
            this.retractMsg(val);
        }
    },
    data () {
        return {
            formData: {
                ...CHAT
            },
            contList: [],
            page: {
                has_next: '',
                next_id: ''
            },
            sessionInfo: {
                user_info: {
                    acg_order_money: "",
                    address_detail: "",
                    address_name: "",
                    address_phone: "",
                    agent_level: '',
                    head_img: "",
                    order_count: '',
                    order_time: '',
                    school_name: "",
                    sex: '',
                    student_no: "",
                    true_name: "",
                }
            },//用户聊天信息
            //转接客服
            dialogVisible: false,
            transList: [],
            nickname: '',
            type: '',
            typeList: [{value: '', label: '全部'},{value: 'official', label: '掌大客服'},{value: 'shop', label: '商家客服'}],
            isScroll: true,
            CUURENT: 0,//当前tab
            isOrderTips: false,//是否展示订单提示
            orderList: [],//订单列表
            orderListCopy: [],//订单列表数据拷贝
            order_no: '',//订单搜索
            // 视频播放相关
            url: '',
            left: 0,
            fileList: [],
            showProvide: true,
            showLoading: false,
            clickIndex: 0
        };
    },
    mounted () {
        const showTiisOrderTips = sessionStorage.getItem('ZSDX_CUSTOM_TIPS');

        this.isOrderTips = showTiisOrderTips ? false : true;
        this.init();
        // console.log('processp',process.env);

        // setTimeout(() => {
        //     this.retractMsg(JSON.stringify({
        //         msg_id: '6281',
        //         session_no: 'kscs_a5d81824c07',
        //         chat_no: 'ksc_7807ece3b4ef'
        //     }));
        // },5000);
    },
    methods: {
        /**
         * @description 初始化聊天列表
         */
        init () {
            //事件监听
            document.querySelector('.__container').addEventListener('click', e => {
                if(!this.formData.showEmoji) return false;
                this.$set(this.formData, 'showEmoji', false);
            });
            const setKeyStatus = (keyCode, status) => {
                switch (keyCode) {
                    case 13:
                        if (this.formData.onShfit === status) return;
                        this.formData.message = this.formData.onShfit && this.formData.onCtrl ? (this.formData.message + '\n') : this.formData.message;
                        this.$set(this.formData,'onShfit', status);
                        break;
                    case 17:
                        if (this.formData.onCtrl === status) return;
                        this.formData.message = this.formData.onShfit && this.formData.onCtrl ? (this.formData.message + '\n') : this.formData.message;
                        this.$set(this.formData,'onCtrl', status);
                        break;
                    default:
                        break;
                }
            };
            document.addEventListener('keydown', e => {
                setKeyStatus(e.keyCode, true);
            });
            document.addEventListener('keyup', e => {
                setKeyStatus(e.keyCode, false);
            });

            // 监听再次发起会话
            if(this.$route.query.target == 'next') {
                this.$emit('clickSession');
            }
        },

        /**
         * @description 获取客服资料详情
         */
        getSessionInfo () {
            this.$post('/Session/getSessionInfo', {
                session_no: this.session_no
            }, resp => {
                if(resp.code == 1) {
                    this.$set(this.formData, 'sessionFlag', resp.data.session_status == 1 ? true : false);
                    this.sessionInfo = {
                        ...resp.data
                    };

                    this.order_no = '';

                    // 数据处理
                    if(resp.data.recent_order_list && !!resp.data.recent_order_list.length) {
                        this.orderList = resp.data.recent_order_list.reduce((cur,next) => {
                            const item_list = next.item_list.length ? next.item_list[0] : {
                                goods_info: {
                                    goods_cover: '',
                                    title: ''
                                }
                            };

                            cur.push({
                                goods_cover: item_list.goods_info.goods_cover,
                                goods_title: item_list.goods_info.title,
                                order_no: next.order_no,
                                order_time: next.create_time,
                                pay_time: next.pay_time,
                                order_type: next.pay_type,
                                money: next.money,
                                goods_num: next.item_list.length
                            });
                            return cur;
                        },[]);
                        this.orderListCopy = JSON.parse(JSON.stringify(this.orderList));
                    } else {
                        this.orderList = [];
                    }
                } else {
                    // this.$notify({
                    //     title: '提示',
                    //     message: resp.msg,
                    //     type: 'warning',
                    //     duration: 2000
                    // });
                }
            });
        },

        /**
         * @description 订单查询
         */
        checkShopOrderData () {
            if(!this.orderListCopy.length) return false;

            if(!this.order_no) {
                this.orderList = JSON.parse(JSON.stringify(this.orderListCopy));
                return false;
            }

            const data = this.orderListCopy.reduce((cur,next) => {
                if(this.order_no == next.order_no) {
                    cur.push(next);
                }
                return cur;
            },[]);

            // console.log('---data---', data);

            this.orderList = data;
        },

        /**
         * @description 获取会话消息列表
         */
        getSessionMsgList (from_id) {
            this.$post('/Session/getSessionMsgList',{
                session_no: this.session_no,
                from_id: from_id
            }, resp => {
                if(resp.code == 1) {
                    this.$set(this.formData, 'loading', false);
                    this.contList = resp.data.list;
                    this.page = {
                        ...resp.data.page
                    };
                    this.$set(this.formData, 'nextPage', false);

                    let list = JSON.parse(JSON.stringify(this.contList));

                    list.forEach(option => {
                        if(option.msg_type == 'text') {
                            option.msg_content2 = option.msg_content;
                            option.msg_content = JSON.parse(option.msg_content).text;
                        }

                        if(option.msg_type == 'video') {
                            option.process = 100;
                        }
                    });

                    // 追加留言
                    if(this.is_check_msg) {
                        const checkMsg = list => {
                            for(let i=0; i<list.length; i++) {
                                if(!list[i]['session_no']) {
                                    return {
                                        i: i,
                                        msg_time: list[i]['msg_time'],
                                        sender_name: list[i]['sender_info']['sender_name']
                                    };
                                }
                            }
                        };

                        const msgObj = checkMsg(list);

                        list.splice(msgObj['i'], 0, {
                            msg_type: 'notice',
                            msg_time: msgObj['msg_time'],
                            msg_content: JSON.stringify({
                                text: `用户${msgObj['sender_name']}发起会话留言`
                            })
                        });
                    }

                    // console.log('---list--', list);

                    this.$store.commit('global/SET_DATALIST', list);

                    if(this.changeTable) {
                        setTimeout(() => {
                            this.scrollBottom();
                        },50);
                        this.changeTable = false;
                    }

                    setTimeout(() => {
                        this.showLoading = false;
                    },200);
                } else {
                    setTimeout(() => {
                        this.showLoading = false;
                    },200);
                }
            });
        },

        /**
         * @description 上滑加载数据
         */
        loadMore (evt, el) {
            if(this.formData.nextPage || this.page.has_next == 0 || this.changeTable) return false;
            if(evt.target.scrollTop <= 50) {
                this.$set(this.formData, 'loading', true);
                this.$set(this.formData, 'nextPage', true);
                this.getSessionMsgList(this.page.next_id);

                setTimeout(()=>{
                    document.querySelector('.content').scrollTop = 200;
                },100);
            }

            // console.log(evt.target.scrollTop);
        },

        /**
         * @description 接收消息时 && 消息是此条会话
         */
        upDateSession (msg_id) {
            this.scrollBottom();
        },

        /**
         * @description 滑动至最底部
         */
        scrollBottom () {
            this.$nextTick(() => {
                setTimeout(()=>{
                    if(document.querySelector('.content')) {
                        document.querySelector('.content').scrollTop = 999999;
                        document.querySelector('.content').scrollTop = document.querySelector('.content').scrollHeight;
                    }
                    this.setMessageHeight();
                },100);
            });
        },

        /**
         * @description 设置元素高度
         */
        setMessageHeight () {
            this.$nextTick(() => {
                let _height = document.querySelectorAll('.__height');
                let _msg = document.querySelectorAll('.session-mid');

                for(let i=0; i<_height.length; i++) {
                    _msg[i].style.height = _height[i].offsetHeight + 'px';
                }
            });
        },

        /**
         * @description 隐藏滚动条
         */
        scrollHide () {
            this.$nextTick(()=>{
                setTimeout(() => {
                    this.isScroll = false;
                },100);
            });
        },

        /**
         * @description 显示滚动条
         */
        showScroll () {
            this.isScroll = true;
        },

        /**
         * @description 开始会话
         */
        startSession () {
            this.$post('/Session/startSession',{
                session_no: this.session_no
            }, resp => {
                if(resp.code == 1) {
                    this.$set(this.formData, 'detailFlag', false);
                    this.$set(this.formData, 'sessionFlag', true);
                    if(this.sessionInfo.session_status == 2) {
                        this.$emit('connect', {
                            ...this.tabObject,
                            // 关键 根据chat_no来定位到对应会话
                            chat_no: resp.data.chat_no
                        });
                    }
                    setTimeout(()=>{
                        this.getSessionInfo();
                    },100);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 重新发起会话时使用
         */
        startSessionList (row) {
            this.$post('/Session/startSession',{
                session_no: row.session_no
            }, resp => {
                if(resp.code == 1) {
                    // console.log('----重新发起会话成功----');
                    this.$set(this.formData, 'detailFlag', false);
                    this.$store.commit('global/SET_SHOW', false);
                    this.$store.commit('global/SET_TAB', 0);

                    setTimeout(()=> {
                        this.$set(this.formData, 'sessionFlag', true);
                        this.$store.commit('global/SET_SHOW', true);
                        this.scrollBottom();
                    },100);
                } else {
                    // this.$notify({
                    //     title: '提示',
                    //     message: resp.msg,
                    //     type: 'warning',
                    //     duration: 2000
                    // });
                }
            });
        },

        /**
         * @description 修改会话状态
         */
        setFlag () {
            this.$set(this.formData, 'detailFlag', false);
            this.$set(this.formData, 'sessionFlag', true);
        },

        /**
         * @description 跳转商品订单列表查询订单
         */
        fnCheckOrder (no) {
            let oInput = document.createElement("input");

            oInput.value = no;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$notify({
                title: '提示',
                message: '复制成功',
                type: 'success',
                duration: 2000
            });
        },

        /**
         * @description 获取选择表情
         */
        getEmoji (alt) {
            // console.log('alt', alt, replaceEmoji(alt));
            this.$set(this.formData, 'message', this.formData.message + alt);
            this.$refs.textarea.focus();
        },

        /**
         * @description 调用上传图片
         */
        uploadImage () {
            this.$refs.fileInput.click();
        },

        /**
         * @description 上传图片
         */
        handleChangeFile (e) {
            let image = new FormData();

            image.append('picture', e.target.files[0]);
            this.$upload({
                url: '/Upload/uploadPicture',
                data: image,
                success: resp => {
                    if (resp.code == 1) {
                        this.sendImage(resp.data.url);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '上传图片失败',
                            type: 'warning',
                            duration: 2000
                        });
                    }
                }
            });
        },

        /**
         * @description 发送图片
         */
        sendImage (url) {
            this.getImageInfo(url).then(resp => {
                this.$post('/Session/sendSessionMsg',{
                    session_no: this.session_no,
                    msg_type: 'image',
                    msg_content: JSON.stringify({
                        url: url,
                        w: resp.width,
                        h: resp.height
                    })
                }, res => {
                    if(res.code == 1) {
                        // this.$store.commit('global/ADD_MESSAGE',{
                        //     msg_type: 'image',
                        //     msg_time: parseInt(new Date().getTime() / 1000),
                        //     sender_info: {
                        //         sender_head: this.userInfo.head_img,
                        //         sender_name: this.userInfo.nickname
                        //     },
                        //     msg_read: 0,
                        //     msg_content: JSON.stringify({
                        //         url: url,
                        //         w: resp.width,
                        //         h: resp.height
                        //     }),
                        //     is_sender: 1,
                        //     chat_no: '',
                        //     session_no: ''
                        // });
                        this.getNewList();
                        // this.$set(this.formData, 'message', '');
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },

        /**
         * @description 获取图片宽高 //loading
         */
        getImageInfo (url) {
            return new Promise((resolve, reject) => {
                const image = new Image();

                image.src = url;
                image.onload = () => {
                    resolve({
                        width: image.width,
                        height: image.height
                    });
                    this.scrollBottom();
                };
            });
        },

        /**
         * @description 获取最新数据
         *      type: 上传视频更新数据使用
         */
        getNewList (type = false, id = '') {
            this.$post('/Session/getSessionMsgList',{
                session_no: this.session_no,
                from_id: 0
            }, resp => {
                if(resp.code == 1) {
                    let dataList = resp.data.list;

                    dataList.forEach(option => {
                        option.msg_content2 = option.msg_content;
                        // 文本处理
                        if(option.msg_type == 'text') {
                            option.msg_content = replaceEmoji(JSON.parse(option.msg_content).text);
                        }

                        // 视频处理
                        if(option.msg_type == 'video') {
                            option.process = 100;
                        }
                    });
                    this.$store.commit('global/UPDATE_LIST', dataList);

                    console.log('@@-----', this.dataList);

                    // 视频更新
                    if(type && id) {
                        for(let i in this.dataList) {
                            if(this.dataList[i]['msg_type'] === 'video') {
                                if(this.dataList[i]['id'] == id) {
                                    this.$set(this.dataList[i], 'process', 100);//处理进度
                                    this.changeTable = false;
                                }
                            }
                        }
                    }
                    this.scrollBottom();
                }
            });
        },

        /**
         * @description 发送会话消息
         */
        sendSessionMsg (e) {
            let event = window.event || arguments[0];

            if (event.key == 'Enter' || event.code == 'Enter' || event.keyCode == 13) {
                event.preventDefault();
                if(this.formData.message == '' || this.formData.onCtrl) return false;

                const message = {
                    chat_no: "",
                    is_retract: 0,
                    is_sender: 1,
                    msg_content: replaceEmoji(this.formData.message),
                    msg_content2: JSON.stringify({"text": this.formData.message}),
                    msg_id: '',//锁定msd_id
                    msg_read: 0,
                    msg_time: parseInt(new Date().getTime() / 1000),
                    msg_type: "text",
                    sender_info: {
                        sender_name: this.userInfo.nickname,
                        sender_head: this.userInfo.head_img
                    },
                    session_no: ""
                };

                // console.log('111', parseInt(new Date().getTime() / 1000));
                const _message = JSON.parse(JSON.stringify(this.formData.message));

                this.dataList.push(message);

                this.$set(this.formData, 'message', '');

                this.$nextTick(() => {
                    if(document.querySelector('.content')) {
                        document.querySelector('.content').scrollTop = 999999;
                        document.querySelector('.content').scrollTop = document.querySelector('.content').scrollHeight;
                    }
                    this.setMessageHeight();
                });

                this.$post('/Session/sendSessionMsg',{
                    session_no: this.session_no,
                    msg_type: 'text',
                    msg_content: JSON.stringify({"text": _message})
                }, resp => {
                    if(resp.code == 1) {
                        // this.$set(this.formData, 'message', '');
                        // this.getNewList();

                        this.$post('/Session/getSessionMsgList',{
                            session_no: this.session_no,
                            from_id: 0
                        }, next => {
                            if(next.code === 1) {
                                const dataList = next.data.list;

                                for(let i=0; i<dataList.length; i++) {
                                    if(dataList[i]['msg_type'] == 'text') {
                                        if(dataList[i]['msg_content'] === message.msg_content2 && (Math.abs(dataList[i]['msg_time'] - message.msg_time) < 2)) {
                                            const object = dataList[i];

                                            for(let j in this.dataList) {
                                                if(!!this.dataList[j]['msg_content2']) {
                                                    if(this.dataList[j]['msg_content2'] === object['msg_content']) {
                                                        this.$set(this.dataList[j], 'chat_no', object['chat_no']);
                                                        this.$set(this.dataList[j], 'msg_id', object['msg_id']);
                                                        this.$set(this.dataList[j], 'session_no', object['session_no']);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                                // console.log('---', this.dataList);
                            }
                        });

                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });

                return false;
            }
        },

        /**
         * @description 发送评价
         */
        sendEvaluate () {
            this.$post('/Session/sendSessionEvaluateRequest',{
                session_no: this.session_no
            }, resp => {
                if(resp.code == 1) {
                    this.scrollBottom();
                    this.$notify({
                        title: '提示',
                        message: '发送成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 保存备注
         */
        saveRemark () {
            this.$post('/Session/setSessionRemark',{
                session_no: this.session_no,
                session_remark: this.sessionInfo.session_remark
            }, resp => {
                if(resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '保存成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 转接当前会话
         */
        fnTransferSession () {
            this.getTableData();
            this.dialogVisible = !this.dialogVisible;
        },

        /**
         * @description 获取可转接客服列表
         */
        getTableData () {
            this.$post('/Session/getTransferKfList', {
                session_no: this.session_no,
                nickname: this.nickname,
                kf_type: this.type
            }, resp => {
                if (resp.code == 1) {
                    this.transList = resp.data.list;
                }
            });
        },

        /**
         * @description 选择转接客服
         */
        changeKf (row, flag) {
            this.$set(row, 'flag', flag);
        },

        /**
         * @description 确定转接当前会话给客服
         */
        confirmTransfer () {
            let sessionList = this.transList.reduce((cur,next) => {
                if(next.flag) cur.push(next.kf_no);
                return cur;
            },[]);

            if(sessionList.length) {
                this.$prompt('请输入转接理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '内容不可以为空'
                }).then(({ value }) => {
                    sessionList.forEach(option => {
                        this.$post('/Session/transferSession', {
                            session_no: this.session_no,
                            transfer_kf_no: option,
                            transfer_reason: value
                        }, resp => {
                            if (resp.code == 1) {
                                //
                            }
                        });
                    });

                    setTimeout(()=>{
                        this.dialogVisible = !this.dialogVisible;
                        this.$notify({
                            title: '提示',
                            message: '已发出转接请求，对方同意后即可转接成功',
                            type: 'success',
                            duration: 2000
                        });
                    },300);
                });
            } else {
                this.$notify({
                    title: '提示',
                    message: '请先选择转接客服',
                    type: 'warning',
                    duration: 2000
                });
            }

            // console.log('sessionList', sessionList);
        },

        /**
         * @description 退出当前会话
         */
        fnQuitSession () {
            this.$emit('closeSession');
        },

        /**
         * @description 设置发起会话状态
         */
        setDetailFalg () {
            setTimeout(()=>{
                this.$set(this.formData, 'detailFlag', true);
            },300);
        },

        /**
         * @description 查看详情时调用
         */
        getSession (flag) {
            this.getSessionInfo();
            this.$set(this.formData, 'detailFlag', flag);
        },

        /**
         * @description 关闭会话
         */
        closeModel () {
            this.$emit('close');
            this.$set(this.formData, 'detailFlag', false);
            this.$store.commit('global/SET_SESSION', '');
        },

        /**
         * @description 重新发起会话
         */
        nextSession () {
            if(!this.authList.includes('session')) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return;
            }

            this.$post('/Session/getSessionInfo', {
                session_no: this.session_no
            }, resp => {
                if(resp.code == 1) {
                    this.$emit('close');
                    if(this.formData.session_status == 1 || this.formData.session_status == 0) {
                        this.$router.push({
                            path: '/',
                            query: {
                                session_no: this.session_no,
                                target: 'next'
                            }
                        });
                        this.$store.commit('global/SET_SESSION', this.session_no);
                    } else {
                        this.$post('/Session/startSession',{
                            session_no: this.session_no
                        }, resp => {
                            if(resp.code == 1) {
                                this.$router.push({
                                    path: '/',
                                    query: {
                                        session_no: this.session_no,
                                        target: 'next'
                                    }
                                });
                                this.$store.commit('global/SET_SESSION', this.session_no);
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });

                    }
                }
            });
            this.$set(this.formData, 'detailFlag', false);
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },
        /**
         * @description 处理输入框图片粘贴
         * @param event
         */
        handlePaste(event) {
            const items = (event.clipboardData || window.clipboardData).items;
            let file = null;

            if (!items || items.length === 0) {
                console.log("当前浏览器不支持");
                return;
            }
            // 查找剪切板的图片
            for (let i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") !== -1) {
                    file = items[i].getAsFile();
                    break;
                }
            }
            // 剪切板内容非图片
            if (!file) {
                // console.log("剪切板内容非图片");
                return;
            }
            // file是剪切板中的图片对象
            this.$confirm('是否要发送图片?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let e = {
                    target: {files:[file]}
                };
                this.handleChangeFile(e);
            });
        },

        /**
         * @description 切换tabs
         */
        handleChangeTab (index) {
            this.CUURENT = index;
        },

        /**
         * @description 因此tips
         */
        handleHideTips () {
            this.isOrderTips = false;
            sessionStorage.setItem('ZSDX_CUSTOM_TIPS', 'true');
        },

        /**
         * @description 复制订单编号
         */
        handleCopyOrder (order_no) {
            let str = order_no;
            let oInput = document.createElement("input");

            oInput.value = str;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$notify({
                title: '提示',
                message: '复制成功',
                type: 'success',
                duration: 2000
            });
        },

        /**
         * @description 播放视频
         */
        handlePlayVideo (option, type) {
            let row = JSON.parse(option.msg_content);

            if(option.process < 100) return false;

            this.left = document.getElementById(row.cover).getClientRects()[0].x + (type === 'left' ? 318 : -318);
            this.url = row.url;
            this.$refs.videoSimple.showVideo();
        },

        /**
         * @description 文件超出个数限制时的钩子
         */
        beforeUploadExcwwd (files, fileList) {
            this.$notify({
                title: '提示',
                message: `最多一次只可以上传1个视频`,
                type: 'warning',
                duration: 2000
            });
            return false;
        },

        /**
         * @description 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
         */
        fnChangeUpload (file, fileList) {
            this.fileList = fileList;
        },

        /**
         * @description 视频上传
         */
        fnUploadFile (event) {
            // 处理视频上传
            this.fnGetUploadAuth(event.file, data => {
                let fd = new FormData();

                fd.append('policy', data.body.policy);
                fd.append('signature', data.body.signature);
                fd.append('file', event.file);

                // 处理视频url，并添加一条视频数据
                this.fnSetVideoCover(data.path).then(url => {
                    const creatData = {
                        sender_info: {
                            sender_head: this.userInfo.head_img,
                            sender_name: this.userInfo.nickname
                        },
                        is_sender: 1,
                        msg_type: 'video',
                        msg_content: JSON.stringify({
                            cover: '',
                            url: url,
                            duration: ''
                        }),
                        process: 0,
                        msg_time: new Date().getTime() / 1000,
                        id: this.randomString(32),
                        chat_no: '',
                        msg_id: '',
                        session_no: ''
                    };

                    this.changeTable = true;
                    this.dataList.push(creatData);

                    // 数据更新后，重置滚动条位置
                    this.scrollBottom();

                    //清空上一次内容
                    this.fileList = [];

                    this.uploadVideoFun(fd, data, url, creatData['id'], this.dataList[this.dataList.length - 1]);
                });
            });
        },

        /**
         * @description 视频上传
         *      fd: 视频文件
         *      data: 视频上传返回相关参数
         *      url: 视频路径，唯一
         *      id: 唯一id
         *      creatData： 当前对象
         */
        uploadVideoFun (fd, data, url, id, creatData) {

            // 开始处理视频上传
            this.$upload({
                url: data.api,
                data: fd,
                progress: e => {
                    if( Number(e.percent.toFixed(1) * 1) >= 99) return false;
                    this.$set(creatData, 'process', Number(e.percent.toFixed(1) * 1));//进度处理
                },
                success: next => {
                    if(next.code === 200) {

                        for(let i in this.dataList) {
                            if(this.dataList[i]['msg_type'] === 'video') {
                                if(this.dataList[i]['id'] == id) {
                                    //处理进度
                                    this.$set(this.dataList[i], 'process', 99.99);
                                }
                            }
                        }

                        //生成截图
                        this.$post('/Upload/createVideoSnapShot', {
                            file_path: data.path,
                            snap_time: 2
                        }, resp => {
                            if (resp.code == 1) {
                                // 发送视频内容
                                // if(resp.data.image_url.indexOf('.png')) {
                                this.getImageInfo(resp.data.image_url).then(imageInfo => {
                                    this.$post('/Session/sendSessionMsg',{
                                        session_no: this.session_no,
                                        msg_type: 'video',
                                        msg_content: JSON.stringify({
                                            "path": next.url,
                                            "cover": resp.data.image_url,
                                            "duration": next.time,
                                            "w": imageInfo.width,
                                            "h": imageInfo.height
                                        })
                                    }, resp => {
                                        if(resp.code == 1) {
                                            // 视频上传成功后处理 适合单视频上传
                                            // this.getNewList(true, id);

                                            // 视频上传成功后处理 适合多视频上传
                                            this.$post('/Session/getSessionMsgList',{
                                                session_no: this.session_no,
                                                from_id: 0
                                            }, option => {
                                                if(option.code == 1) {
                                                    const dataList = option.data.list;

                                                    // 处理进度，添加相关id数据
                                                    for(let i=0; i<dataList.length; i++) {
                                                        if(dataList[i]['msg_type'] == 'video') {
                                                            const msg_content = JSON.parse(dataList[i]['msg_content']);

                                                            if(msg_content.url.includes(data.path)) {
                                                                for(let j in this.dataList) {
                                                                    if(this.dataList[j]['id'] === creatData['id']) {
                                                                        this.$set(this.dataList[j], 'process', 100);
                                                                        this.$set(this.dataList[j], 'chat_no', dataList[i]['chat_no']);
                                                                        this.$set(this.dataList[j], 'msg_id', dataList[i]['msg_id']);
                                                                        this.$set(this.dataList[j], 'session_no', dataList[i]['session_no']);
                                                                        this.$set(this.dataList[j], 'msg_content', JSON.stringify({
                                                                            cover: msg_content.cover,
                                                                            url: msg_content.url,
                                                                            duration: msg_content.duration,
                                                                            w: msg_content.w,
                                                                            h: msg_content.h
                                                                        }));

                                                                        setTimeout(() => {
                                                                            this.setMessageHeight();
                                                                        },100);
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                    this.changeTable = false;
                                                }
                                            });

                                        } else {
                                            this.changeTable = false;
                                            this.$notify({
                                                title: '提示',
                                                message: resp.msg,
                                                type: 'warning',
                                                duration: 2000
                                            });
                                        }
                                    });
                                });
                                // } else {
                                //     this.$notify({
                                //         title: '提示',
                                //         message: '视频封面图生成失败',
                                //         type: 'warning',
                                //         duration: 2000
                                //     });
                                // }
                            }else{
                                this.$message({
                                    type: 'warning',
                                    message: resp.msg,
                                    center: true
                                });
                            }
                        });
                    } else {
                        this.$set(this.dataList[this.dataList.length - 1], 'process', -1);
                        this.$notify({
                            title: '提示',
                            message: next.message,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                },
                fail: error => {
                    this.$set(this.dataList[this.dataList.length - 1], 'process', -1);
                    this.dataList.splice(this.dataList.length - 1, 1);
                    this.$message({
                        type: error,
                        dangerouslyUseHTMLString: true,
                        message: `<p>视频上传失败,请检测视频格式是否正确,视频是否可以正常播放</p>`,
                        duration: 5000,
                        showClose: true
                    });
                }
            });
        },

        /**
         * @description 截图和视频处理
         */
        fnSetVideoCover (data, row) {
            return new Promise((resolve,reject) => {
                this.$post('/Upload/getPreviewUrl', {
                    path: data
                }, resp => {
                    if (resp.code == 1) {
                        resolve(resp.data.url);
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            });
        },

        /**
         * @description 获取视频上传地址
         */
        fnGetUploadAuth(file, callback) {
            this.$post('/Upload/uploadVideoAuth', {
                file_name: file.name,
                file_size: file.size
            }, resp => {
                if (resp.code == 1) {
                    callback(resp.data);
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                    //清空上一次内容
                    this.fileList = [];
                }
            });
        },

        /**
         * @description 随机生成Id,服务端只返回时间段～,用于修改时使用
         */
        randomString (len) {
            let id = len || 32;
            let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
            let maxPos = $chars.length;
            let pwd = '';

            for (let i = 0; i < id; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        },

        /**
         * @description 复制消息
         *      可复制类型 文本 emoji链接 图片链接 视频链接
         */
        handleCopyMessage (row) {
            let message = '';
            let content = row.msg_content;

            switch (row.msg_type) {
                case 'text':
                    for(let i = 0; i < this.dataList.length; i++) {
                        if(this.dataList[i]['msg_id'] == row.msg_id) { //删除该条消息
                            if(row.msg_content2) {
                                message = JSON.parse(row.msg_content2).text;
                                // console.log('message', message);
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: `复制失败`,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        }
                    }
                    break;
                case 'image':
                    message = JSON.parse(row.msg_content).url;
                    break;
                case 'video':
                    message = JSON.parse(row.msg_content).url;
                    break;
                case 'emoji':
                    message = JSON.parse(row.msg_content).url;
                    break;
                default:
                    break;
            }

            let oInput = document.createElement("input");

            oInput.value = message;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$notify({
                title: '提示',
                message: '复制成功',
                type: 'success',
                duration: 2000
            });
            // if(message) {
            // } else {
            //     this.$notify({
            //         title: '提示',
            //         message: `复制失败`,
            //         type: 'warning',
            //         duration: 2000
            //     });
            // }
        },

        /**
         * @description 撤回消息
         */
        handleCancekmessage (row) {
            this.changeTable = true;//关闭分页加载

            // 查询是否可以撤回此条消息，两分钟内
            const isRetract = msg_time => {
                let now_time = new Date().getTime();

                if(now_time - msg_time * 1000 > 2 * 60 * 1000) {
                    return false;
                } else {
                    return true;
                }
            };

            if(isRetract(row.msg_time)) {
                for(let i = 0; i < this.dataList.length; i++) {
                    if(this.dataList[i]['msg_id'] == row.msg_id) { //删除该条消息
                        this.dataList.splice(i, 1);
                    }
                }

                this.$post('/Session/retractSessionMsg', {
                    session_no: row.session_no,
                    msg_id: row.msg_id
                }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            type: 'success',
                            duration: 2000
                        });

                        // 手动添加notice通知
                        this.dataList.push({
                            msg_type: '',
                            msg_time: (new Date().getTime() - 100) / 1000,
                            msg_content: JSON.stringify({
                                text: '你撤回了一条消息'
                            }),
                            is_retract: 1,
                            is_sender: 1
                        });

                        this.changeTable = false;//打开分页加载

                        this.$nextTick(() => {
                            this.setMessageHeight();
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            } else {
                this.changeTable = false;//打开分页加载
                this.$notify({
                    title: '提示',
                    message: `只可以撤回两分钟内的消息`,
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 用户端消息撤回处理
         *      删除当前消息
         *      添加notice通知消息
         */
        retractMsg (msg) {
            this.changeTable = true;//关闭分页加载
            let data = JSON.parse(msg);

            // 在当前会话列表
            if(this.chat_no === data.chat_no) {
                // 撤回消息在当前列表
                for(let i=0; i< this.dataList.length; i++) {
                    if(this.dataList[i]['msg_id'] === Number(data['msg_id']) && this.dataList[i]['session_no'] === data['session_no']) {
                        this.dataList.splice(i,1);//移除消息
                    }
                }

                // 添加通知消息
                this.dataList.push({
                    msg_type: '',
                    msg_time: (new Date().getTime() - 100) / 1000,
                    msg_content: JSON.stringify({
                        // text: this.sessionInfo.user_info.true_name + '撤回了一条消息'
                        text: ''
                    }),
                    is_retract: 1,
                    is_sender: 0
                });

                this.$nextTick(() => {
                    this.changeTable = false;//打开分页加载
                    this.setMessageHeight();
                    setTimeout(() => {
                        document.querySelector('.content').scrollTop = document.querySelector('.content').scrollHeight;
                    },200);
                });
            } else {
                this.changeTable = false;//打开分页加载
                return false;
            }
        },

        /**
         * @description 查看图片
         * @param   {String}    images    单图预览
         * @param   {Array}     images     多图预览
         */
        fnShowPreview(images) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },
    }
};
</script>

<style lang="less" scoped>
.chat {
    flex: 1;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    .chat-wrap {
        display: flex;
        flex: 1;
        height: 100%;
        background: #F0F2F7;
    }
    .chat-view {
        flex: 1;
        height: 100%;
        display: flex;
        padding-top: 232px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        .chat-view-image {
            width: 280px;
            height: 178px;
            margin-bottom: 13px;
        }
        .chat-view-text {
            color: #99999999;
            font-size: 14px;
        }
    }
}
.message {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
    .head {
        width: 100%;
        // min-width: 696px;
        height: 64px;
        box-sizing: border-box;
        border-bottom: 1px #F0F2F7 solid;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 24px;
        .head-name{
            color: #000000;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            .head-shop {
                font-size: 16px;
                color: rgba(0,0,0,.8);
                font-weight: 400;
                margin-left: 10px;
            }
        }
        .head-transfer {
            display: flex;
            align-items: center;
            .head-transfer-accep {
                font-size: 14px;
                font-weight: 500;
                color: #20A0FF;
                width: 72px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                margin-right: 24px;
                cursor: pointer;
                border-right: 1px #F0F2F5 solid;
                white-space: nowrap;
            }
            .head-transfer-quit {
                font-size: 14px;
                font-weight: 500;
                color: #20A0FF;
                cursor: pointer;
                white-space: nowrap;
            }
        }
    }
    // 聊天内容
    .content {
        width: 100%;
        height: 70%;
        box-sizing: border-box;
        border-bottom: 1px #F0F2F7 solid;
        overflow: hidden;
        overflow-y: auto;
        padding-bottom: 37px;
        .content-loading {
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            .el-icon-loading {
                font-size: 16px;
            }
        }
        .session {
            margin-top: 24px;
            width: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-left: 24px;
            .self {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                &>img {
                    cursor: pointer;
                }
            }
            .my {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                &>img {
                    cursor: pointer;
                }
                .session-msg {
                    margin-right: 24px;
                }
            }
            .notice_wrap {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .notice {
                    // width: 100%;
                    width: auto;
                    height: 18px;
                    line-height: 18px;
                    text-align: center;
                    color: rgba(0, 0, 0, 0.5);
                    font-size: 12px;
                    transform: translateX(-12px);
                    border-radius: 4px;
                }
            }
            .session-head {
               width: 100%;
               height: 50px;
               display: flex;
               align-items: center;
               .session-img {
                   width: 50px;
                   height: 50px;
                   border-radius: 50%;
                   margin-right: 12px;
               }
                .session-name {
                    height: 20px;
                    line-height: 20px;
                    color: #000000;
                    font-size: 14px;
                    font-weight: 500;
                    margin-right: 8px;
                }
                .session-time {
                    color: rgba(0, 0, 0, 0.5);
                    height: 18px;
                    line-height: 18px;
                    font-size: 12px;
                }
            }
            .session-wrap {
                display: flex;
                padding-top: 10px;
                align-items: center;
                .session-mid {
                    display: flex;
                    font-size: 12px;
                    margin-right: 12px;
                    // position: relative;
                    // top: 30px;
                    white-space: nowrap;
                    flex-direction: column;
                    justify-content: space-between;
                    width: 24px;
                    // align-items: flex-end;
                    .session_button {
                        cursor: pointer;
                        margin-top: 16px;
                        i {
                            font-size: 15px;
                            color: rgba(0, 0, 0, 0.5);
                            &:hover {
                                color: rgba(32, 160, 255, 1);
                            }
                        }
                    }
                }
            }
            .session-msg-wrap {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .session-msg {
                max-width: 461px;
                box-sizing: border-box;
                margin-top: 10px;
                padding: 16px;
                color: rgba(0, 0, 0, 0.8);
                font-size: 14px;
                line-height: 20px;
                background: #F8FAFF;
                border-radius: 10px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }
            .session_button {
                margin-left: 8px;
                cursor: pointer;
                i {
                    font-size: 15px;
                    color: rgba(0, 0, 0, 0.5);
                    &:hover {
                        color: rgba(32, 160, 255, 1);
                    }
                }
            }
            .__video {
                display: flex;
                height: auto;
                overflow: hidden;
                position: relative;
                .__video_icon {
                    width: 60px;
                    height: 60px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    cursor: pointer;
                }
                .__process_wrap {
                    width: 240px;
                    height: 300px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(0, 0, 0, 0.2)
                }
            }
            .right {
                justify-content: flex-end;
                padding-right: 24px;
                .session-img, .session-name {
                    margin-right: 0;
                }
                .session-name {
                    margin: 0 12px 0 8px;
                }
            }
            .session-goods {
                background: #F8FAFF;
                box-sizing: border-box;
                padding: 16px;
                border-radius: 10px;
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                .goods_order {
                    height: 20px;
                    display: flex;
                    align-items: center;
                    color: rgba(0, 0, 0, 0.8);
                    font-size: 14px;
                    margin-bottom: 10px;
                    margin-right: 10px;
                    .order_copy {
                        display: inline-block;
                        width: 64px;
                        height: 20px;
                        background: #FFFFFF;
                        box-shadow: 0px 2px 4px 0px rgba(121, 144, 201, 0.32);
                        border-radius: 11px;
                        margin-left: 10px;
                        font-size: 12px;
                        color: #20A0FF;
                        text-align: center;
                        line-height: 20px;
                        cursor: pointer;
                        position: relative;
                        top: -2px;
                    }
                }
                .goods_content {
                    display: flex;
                    align-items: center;
                    .goods_cover {
                        width: 86px;
                        height: 86px;
                        border-radius: 4px;
                        margin-right: 10px;
                    }
                    .goods_wrap {
                        flex: 1;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .goods_title {
                            color: rgba(0, 0, 0, 0.8);
                            font-size: 14px;
                            line-height: 20px;
                            max-width: 343px;
                            margin-bottom: 10px;
                        }
                        .goods_price {
                            font-size: 14px;
                            color: rgba(0, 0, 0, 0.6);
                            height: 20px;
                            line-height: 20px;
                        }
                    }
                }
            }
            .session-order {
                display: flex;
                flex-direction: column;
                background: #F8FAFF;
                box-sizing: border-box;
                padding: 16px;
                border-radius: 10px;
                margin-top: 10px;
                cursor: pointer;
                .goods_order {
                    height: 16px;
                    line-height: 16px;
                    color: rgba(0, 0, 0, 0.8);
                    font-size: 14px;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    .order_copy {
                        display: inline-block;
                        width: 64px;
                        height: 20px;
                        background: #FFFFFF;
                        box-shadow: 0px 2px 4px 0px rgba(121, 144, 201, 0.32);
                        border-radius: 11px;
                        margin-left: 10px;
                        font-size: 12px;
                        color: #20A0FF;
                        text-align: center;
                        line-height: 20px;
                        cursor: pointer;
                        position: relative;
                        top: -2px;
                    }
                }
                .goods_clumn {
                    display: flex;
                    align-items: center;
                    .goods_cover {
                        width: 86px;
                        height: 86px;
                        border-radius: 4px;
                        margin-right: 10px;
                    }
                    .goods_wrap {
                        flex: 1;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .goods_title {
                            color: rgba(0, 0, 0, 0.8);
                            font-size: 14px;
                            line-height: 20px;
                            max-width: 343px;
                            margin-bottom: 14px;
                        }
                        .goods_status {
                            color: #FF3030;
                            font-size: 14px;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
    .show-scroll {
        &::-webkit-scrollbar {
            scrollbar-width: block;
            width: 3px;
        }
    }
    .hide-scroll {
        &::-webkit-scrollbar {
            width: 3px;
            scrollbar-width: none;
        }
        &::-webkit-scrollbar-track-piece {
            background: #ffffff;
        }
        &::-webkit-scrollbar-thumb {
            background: #ffffff;
        }

    }
    //输入框
    .chat {
        width: 100%;
        height: 30%;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        .chat-head {
            width: 100%;
            height: 38px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 24px;
            &>.zsdxfont{
                font-size: 16px;
                color: rgba(0, 0, 0, 0.3);
                margin-right: 24px;
                cursor: pointer;
                &:hover {
                    color: #20A0FF;
                }
            }
            .__upload {
                width: 16px;
                height: 16px;
                overflow: hidden;
                margin-right: 24px;
                .__upload_wrpa {
                    width: 16px;
                    height: 16px;
                    overflow: hidden;
                    i {
                        color: rgba(0, 0, 0, 0.3);
                        cursor: pointer;
                        &:hover {
                            color: #20A0FF;
                        }
                    }
                }
            }
        }
        .chat-message {
            width: 100%;
            height: 72%;
            padding-left: 11px;
            box-sizing: border-box;
            margin-top: 12px;
        }
    }
    //输入框状态
    .chat-no {
        width: 100%;
        height: 30%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        .chat-start {
            color: #20A0FF;
            font-size: 14px;
            cursor: pointer;
        }
    }
}
.detail {
    width: 280px;
    height: 100%;
    margin-left: 12px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    // .detail-title {
    //     width: 100%;
    //     height: 64px;
    //     display: flex;
    //     align-items: center;
    //     box-sizing: border-box;
    //     padding-left: 24px;
    //     font-size: 14px;
    //     color: #000000;
    //     font-weight: 500;
    //     border-bottom: 1px #F0F2F7 solid;
    // }
    ._detail_header {
        width: 100%;
        height: 64px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        border-bottom: 1px rgba(240, 242, 247, 1) solid;
        ._detail_title {
            width: 50%;
            height: 64px;
            text-align: center;
            line-height: 64px;
            color: rgba(0, 0, 0, 0.7);
            font-size: 14px;
        }
        ._detail_tabs {
            position: absolute;
            bottom: 0px;
            width: 28px;
            height: 3px;
            background: rgba(32, 160, 255, 1);
            transition: all .3s;
        }
    }
    .detail-info {
        width: 100%;
        box-sizing: border-box;
        height: 50px;
        margin: 20px 0 18px 0;
        display: flex;
        align-items: center;
        padding-left: 24px;
        .detail-photo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .detail-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            .name {
                width: 172px;
                height: 26px;
                line-height: 26px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.8);
                font-weight: 500;
            }
            .agent {
                height: 24px;
                line-height: 24px;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.8);
            }
        }
    }
    ._order {
        width: 280px;
        flex: 1;
        box-sizing: border-box;
        // border: 1px red solid;
        overflow: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }
        ._order_view {
            width: 280px;
            height: 38px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 12px;
            background: rgba(255, 242, 222, 1);
            justify-content: space-between;
            ._order_view_text {
                color: rgba(255, 175, 57, 1);
                font-size: 12px;
                font-weight: 500;
            }
            .zsdxshanchuchacha {
                color: rgba(255, 175, 57, 1);
                font-size: 15px;
                cursor: pointer;
            }
        }
        ._order_none {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            ._order_none_image {
                width: 96px;
                height: 96px;
                margin-bottom: 6px;
            }
            ._order_none_text {
                color: rgba(0, 0, 0, 0.5);
                font-size: 12px;
                white-space: nowrap;
            }
        }
        ._order_item {
            width: calc(100% - 24px);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 12px 0;
            margin-left: 12px;
            border-bottom: 1px rgba(240, 242, 247, 1) solid;
            ._order_side {
                width: 100%;
                height: 74px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding: 10px;
                background: rgba(245, 245, 245, 1);
                margin-bottom: 4px;
                overflow: hidden;
                // border: 1px red solid;
                .order_cover_wrap {
                    width: 54px;
                    height: 54px;
                    border-right: 2px;
                    margin-right: 6px;
                    position: relative;
                    .order_cover {
                        width: 54px;
                        height: 54px;
                        border-right: 2px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                    }
                    .order_goods_num {
                        width: 54px;
                        height: 18px;
                        background-color: rgba(0, 0, 0, 0.4);
                        text-align: center;
                        line-height: 18px;
                        color: #ffffff;
                        font-size: 12px;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        z-index: 10;
                    }
                }
                ._order_title {
                    width: 176px;
                    color: rgba(0, 0, 0, 0.8);
                    font-size: 12px;
                    line-height: 20px;
                    max-height: 40px;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
            ._order_list {
                display: flex;
                align-items: center;
                margin-top: 8px;
                height: 16px;
                ._order_name {
                    width: 70px;
                    white-space: nowrap;
                    color: rgba(0, 0, 0, 0.5);
                    font-size: 12px;
                }
                ._order_content {
                    color: rgba(0, 0, 0, 0.8);
                    font-size: 12px;
                }
                ._order_copy {
                    width: 12px;
                    height: 12px;
                    margin-left: 6px;
                    cursor: pointer;
                }
            }
        }
    }
    .item {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding-left: 24px;
        margin-bottom: 18px;
        // align-items: center;
        .item-title {
            color: rgba(0, 0, 0, 0.8);
            font-size: 14px;
        }
        .item-content {
            width: 162px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.8);
            line-height: 20px;
            margin-left: 10px;
            position: relative;
            top: -2px;
        }
    }
    .item-line {
        width: 232px;
        height: 1px;
        background: #F0F2F7;
        margin: 2px 0 18px 24px;
    }
    .item-remark {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 500;
        margin-left: 24px;
        margin-bottom: 10px;
    }
    .item-save {
        width: 232px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px #F0F2F7 solid;
        color: #20A0FF;
        font-size: 14px;
        margin-top: 8px;
        margin-left: 24px;
        cursor: pointer;
    }
}

.transfer {
    .tips {
        color: #17A298;
        font-size: 12px;
        margin-bottom: 24px;
    }
    .header {
       height: 32px;
       display: flex;
       align-items: center;
       margin-bottom: 26px;
        &-box {
            height: 32px;
            display: flex;
            align-items: center;
            margin-right: 64px;
            &-title {
                font-size: 14px;
                color: #333;
                margin-right: 12px;
            }
        }
    }
    .info {
        display: flex;
        align-items: center;
        .info-main {
            position: relative;
            width: 44px;
            height: 44px;
            margin-right: 12px;
            .head_img {
                width: 44px;
                height: 44px;
                border-radius: 50%;
            }
            .status {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
        .info-wrap {
            display: flex;
            flex-direction: column;
            .info-name {
                font-size: 14px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.8);
                height: 20px;
                line-height: 20px;
                margin-bottom: 7px;
            }
            .info-kf {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.5);
                height: 18px;
                line-height: 18px;
            }
        }
    }
    .zsdxweixuanzhong {
        color: rgba(223,229,240,1);
        font-size: 22px;
        cursor: pointer;
    }
    .zsdxgouxuan1 {
        color: rgba(74,160,248,1);
        font-size: 22px;
        cursor: pointer;
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
.video_dialog {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    border: 1px red solid;
    display: flex;
    justify-content: center;
    align-items: center;
    #zsdx_video {
        width: 800px;
        height: 500px;
        border: 1px red solid;
    }
}
</style>

<style lang="less">
.customChast {
    .el-icon-circle-close {
        color: #ffffff;
    }
    .el-textarea__inner {
        resize: none;
        word-break: break-all;
        border: none;
        &::-webkit-scrollbar {
            width: 3px;
        }
        &::-webkit-input-placeholder {
            color: rgba(0, 0, 0, 0.5);
        }
    }
    .item-textarea .el-textarea__inner {
        width: 232px;
        height: 184px;
        background: #f9f9f9;
        padding-left: 13px;
        margin-left: 24px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
    }
    .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-table__body-wrapper {
        height: auto !important;
        max-height: 400px;
    }
}
.zsdx_message {
    min-width: 68px;
    padding: 12px 0;
    cursor: pointer;
    .zsdx_message_copy {
        width: 68px;
        text-align: center;
    }
}
.session_button {
    .el-button {
        padding: 0;
    }
}
</style>
